import { WeaSearchGroup,WeaSelect,WeaTools ,WeaErrorPage ,WeaFormItem ,WeaBrowser,WeaDialog,WeaRightMenu} from 'ecCom';
import {inject, observer} from "mobx-react/index";
import { Button , Modal} from 'antd';
import {WeaLocaleProvider} from 'ecCom';
import * as mobx from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;


@observer
class WorkflowFreeNodeGroup extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            
        }
    }
    render(){
        // console.log(this.props,'--------'); 
        const { workflowNewDesignStore , groupStyle={} , groupsParams = {}} = this.props;
        const { freeIsEditGroup , currentChoosedBranchId = ''} = workflowNewDesignStore;
        const { mergeType = '1' , mergeValue = '' , id = ''} = groupsParams;// mergeType 按比例-1 | 按分支数-2 | 指定通过分支-3
        let style = (currentChoosedBranchId == id) ? {borderWidth:'2px',borderColor:'#2285FE'} :{};
        let currentGroupTitle = '';
        if(mergeType == '1'){
            currentGroupTitle = `${getLabel(506894,'按比例通过')} ${mergeValue}%`;
        }else if(mergeType == '2'){
            currentGroupTitle = getLabel(500223,'按分支数通过 ')+ (mergeValue || 1);
        }else{
            currentGroupTitle = getLabel(390423,'指定通过分支');
        }
        return (
            <div className='wf-design-block-groups' 
                style = {groupStyle} 
                // onClick={this.setBranchType}
            >
                {this.getBorder(currentGroupTitle,style)}
            </div>
        )
    }
    getBorder(title,style){
        const { workflowNewDesignStore , groupsParams ,isReadOnlyModel}= this.props;
        const { branchBorderColorShowId } = workflowNewDesignStore;
        const { id , groupStatus = '0' } = groupsParams;
        let res = [];
        branchBorderColorShowId == id ? style['borderColor'] = '#2285FE' :'';
        const classes = ['groups-title','left-border','top-border','right-border','bottom-border'];
        const readOnly = groupStatus != '0' || isReadOnlyModel;
        let titleStyle = {
            cursor:isReadOnlyModel?'default':'pointer',
            background:isReadOnlyModel?'#f5f5f5':'#fff'
        }
        classes.map(v=>{
            readOnly ? style['cursor'] = 'default' : '';
            res.push(<div 
                    className={v==='groups-title' ? v : ('groups-border '+v)} 
                    style={v==='groups-title'?titleStyle:style}
                    onMouseEnter={this.changeBorderColor}
                    onMouseLeave={this.onMouseLeave}
                    onClick={this.setBranchType}
                >
                    {v==='groups-title' ? title : ''}
                </div>);
        });
        return res;
    }
    setBranchType = ()=>{
        const { workflowNewDesignStore , groupsParams = {} , isReadOnlyModel,isMobile='0',belongWhereTag} = this.props;
        const { setWfDesignFreeEditGroup , setCurrentElement_mobile} = workflowNewDesignStore;
        const readOnly = groupsParams.groupStatus != '0' || isReadOnlyModel;
        if(isReadOnlyModel) return;
        workflowNewDesignStore.currentChoosedItemId = '';
        if(!isReadOnlyModel && isMobile == '1'){
            setCurrentElement_mobile(groupsParams,true,belongWhereTag);
        }
        const { id = ''} = groupsParams;
        setWfDesignFreeEditGroup(groupsParams.id,belongWhereTag);
    }
    onMouseLeave = () => {
        const { workflowNewDesignStore , groupsParams , isReadOnlyModel}= this.props;
        const readOnly = groupsParams.groupStatus != '0' || isReadOnlyModel;
        if(readOnly) return;
        workflowNewDesignStore.branchBorderColorShowId = '';
    }
    changeBorderColor = () => {
        const { workflowNewDesignStore , groupsParams , isReadOnlyModel}= this.props;
        const readOnly = groupsParams.groupStatus != '0' || isReadOnlyModel;
        if(readOnly) return;
        workflowNewDesignStore.branchBorderColorShowId = groupsParams.id || '';
    }
}

export default WeaTools.tryCatch(React, 
    props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@9jhfci`} msg={ props.error ? props.error : getLabel(383324,' 对不起，该页面异常，请联系管理员 ')+'！'} />,
    {error: ""}
)(WorkflowFreeNodeGroup);